﻿@using System.Web.Mvc
@using System.Web.Mvc.Html
@using System.Web.Optimization
@using TPM.Models
@model TPM.Models.Jugador

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel panel-primary">
    <div class="panel-heading">
        Editar Jugador
      <div class="pull-right">
          <a class="link-panel" href="/Jugador">
              <img src="~/Images/boton_volver.png" />
              Volver
          </a>
      </div>
    </div>
    <div class="panel-body">

@using (Html.BeginForm("Edit", "Jugador", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)

    var imagenPath = "/Images/Jugadores/" + @Model.ImagenPath;
   
    <fieldset>
        <legend>Jugador</legend>
        <div style="padding-bottom: 15px; text-align: center;">
                    @Html.ValidationMessageFor(model => model.Domicilio, "Debe completar los campos obligatorios.")
                </div>         
                <div class="well">
                    <div class="titleDatos"><span class="label label-default">Datos Personales</span></div>
                    <div class="createJugador" style="margin-top:15px">     
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Cambiar Foto:</p>
                            </div>                            
                            <div class="col-xs-6">
                                <div id='botonera'>
                                    <input type="file" name="file" id="file" accept="image/*" style="padding: 0px;"></input>
                                    <div style="position: absolute; margin-left: 455px; margin-top: -34px;">
                                        <input id="cancelar" type="button" value="" class="btnEliminar"></input>
                                    </div>                                    
                                </div>
                            </div>
                            <div class="col-xs-4" align="right">
                                <img id="vistaPrevia" src="" alt="" /> 
                                <div class="contenedor">
                                    <div id="marcoVP">
                                        <img id="vistaP" src="@imagenPath" alt="" />
                                    </div>
                                </div>                               
                            </div>
                        </div>                    
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Nombre:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.Nombre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Apellido:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.Apellido)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Apodo:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.TextBoxFor(model => model.Apodo)
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Tipo de documento:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.DropDownListFor(model => model.TipoDocId, new SelectList(Model.TipoDocLista, "TipoDocId", "TipoDocNombre", 1))
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Número de documento:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.TextBoxFor(model => model.NumeroDoc)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Fecha de Nacimiento:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.TextBoxFor(model => model.FechaNacFormateada)
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Domicilio de residencia:</p>
                            </div>
                            <div class="col-xs-2">
                                  @Html.EditorFor(model => model.Domicilio)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Localidad de residencia:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.DropDownListFor(model => model.LocalidadId, new SelectList(Model.LocalidadLista, "LocalidadId", "LocalidadNombre"))
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono:</p>
                            </div>
                            <div class="col-xs-2">
                                  @Html.TextBoxFor(model => model.Telefono)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Email:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.TextBoxFor(model => model.Email) 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Peso:</p>
                            </div>
                            <div class="col-xs-2">
                                  @Html.TextBoxFor(model => model.PesoString)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Estatura:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.TextBoxFor(model => model.EstaturaString)
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Posición:</p>
                            </div>
                            <div class="col-xs-2">
                                <select name="Posicion" id="Posicion">
                                    <option value=""></option>
                                    <option @(Model.Posicion == "Arquero" ? "selected" : "") value="Arquero">Arquero</option>
                                    <option @(Model.Posicion == "Defensor" ? "selected" : "") value="Defensor">Defensor</option>
                                    <option @(Model.Posicion == "Volante" ? "selected" : "") value="Volante">Volante</option>
                                    <option @(Model.Posicion == "Delantero" ? "selected" : "") value="Delantero">Delantero</option>
                                </select> 
                            </div>
                            <div class="col-xs-2">
                                 <p class="textCreateJugador">Pierna habil:</p>
                            </div>
                            <div class="col-xs-2">
                                <select name="PiernaHabil" id="PiernaHabil">
                                    <option @(Model.PiernaHabil == "Derecha" ? "selected" : "") value="Derecha">Derecha</option>
                                    <option @(Model.PiernaHabil == "Izquierda" ? "selected" : "") value="Izquierda">Izquierda</option>
                                </select> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Colegio:</p>
                            </div>
                            <div class="col-xs-6">
                                @Html.TextBoxFor(model => model.Colegio)
                            </div>                            
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Ciudadania Europea:</p>
                            </div>
                            <div class="col-xs-2">
                                <select name="CiudadaniaEuropea" id="CiudadaniaEuropea">
                                    <option value=""></option>
                                    <option @(Model.CiudadaniaEuropea.Trim() == "S" ? "selected" : "") value="S">Si</option>
                                    <option @(Model.CiudadaniaEuropea.Trim() == "N" ? "selected" : "") value="N">No</option>
                                </select>
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Representante:</p>
                            </div>
                            <div class="col-xs-2">
                                <select name="Representante" id="Representante">
                                    <option value=""></option>
                                    <option @(Model.Representante.Trim() == "S" ? "selected" : "") value="S">Si</option>
                                    <option @(Model.Representante.Trim() == "N" ? "selected" : "") value="N">No</option>
                                </select> 
                            </div>
                        </div>                        
                    </div>
                    <script>
                        $('#FechaNacFormateada').datepicker({
                            format: "dd/mm/yyyy",
                            language: "es",
                            autoclose: true,
                            startView: 2
                        });
                    </script>
                </div>
                <div class="well" style="margin-top: 35px">
                    <div class="titleDatos"><span class="label label-default">Cobertura Médica</span></div>
                    <div class="createJugador" style="margin-top:15px">
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Obra social:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.ObraSocial) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Número de afiliado:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.NroObraSocialString)
                            </div>                            
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Servicio de emergencia:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.ServicioEmergencia) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Número de afiliado:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.NroServicioEmergenciaString)
                            </div>                            
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Hospital:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.CoberturaMedica.Hospital) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Dirección:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.Direccion)
                            </div>   
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.CoberturaMedica.Telefono)
                            </div>                         
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Medicamento:</p>
                            </div>
                            <div class="col-xs-10">
                                 @Html.EditorFor(model => model.CoberturaMedica.Medicamento) 
                            </div>                                                   
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Alergico:</p>
                            </div>
                            <div class="col-xs-10">
                                 @Html.EditorFor(model => model.CoberturaMedica.Alergico) 
                            </div>                                                   
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Observaciones:</p>
                            </div>
                            <div class="col-xs-10">
                                 @Html.EditorFor(model => model.CoberturaMedica.Observaciones) 
                            </div>                                                   
                        </div>
                    </div>                    
                </div>
                <div class="well" style="margin-top: 35px">
                    <div class="titleDatos"><span class="label label-default">Datos Generales</span></div>
                    <div class="createJugador" style="margin-top:15px">                        
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Nombre de la madre:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.DatosGenerales.NombreMadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.TelMadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Ocupación:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.OcupacionMadre) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Trabaja en:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.DatosGenerales.TrabajoMadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Dirección:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.DireccionTrabajoMadre)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.TelefonoTrabajoMadre) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Nombre del padre:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.DatosGenerales.NombrePadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.TelPadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Ocupación:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.OcupacionPadre) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Trabaja en:</p>
                            </div>
                            <div class="col-xs-2">
                                @Html.EditorFor(model => model.DatosGenerales.TrabajoPadre) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Dirección:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.DireccionTrabajoPadre)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Teléfono:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.TelefonoTrabajoPadre) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">¿Los padres conviven?</p>
                            </div>
                            <div class="col-xs-2">
                                 <select name="DatosGenerales.PadresConviven" id="DatosGenerales.PadresConviven">
                                     <option value=""></option>
                                     <option @(Model.DatosGenerales.PadresConviven.Trim() == "S" ? "selected" : "") value="S">Si</option>
                                     <option @(Model.DatosGenerales.PadresConviven.Trim() == "N" ? "selected" : "") value="N">No</option>
                                 </select> 
                            </div>
                            @*<div class="col-xs-2">
                                <p class="textCreateJugador">¿Tiene hermanos?</p>
                            </div>*@
                            @*<div class="col-xs-2">
                                 <select name="DatosGenerales.HermanosString" id="DatosGenerales.HermanosString">
                                     <option value=""></option>
                                     <option  @(Model.DatosGenerales.HermanosString.Trim() == "S" ? "selected" : "") value="S">Si</option>
                                     <option @(Model.DatosGenerales.HermanosString.Trim() == "N" ? "selected" : "") value="N">No</option>
                                 </select>
                            </div>*@
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Cantidad de Hermanos:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.HermanosString) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Nombre Responsable:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.NombreResponsable) 
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Parentesco:</p>
                            </div>
                            <div class="col-xs-2">
                                 @Html.EditorFor(model => model.DatosGenerales.ParentescoResponsable)
                            </div>
                            <div class="col-xs-2">
                                <p class="textCreateJugador">Ocupación:</p>
                            </div>
                            <div class="col-xs-2">
                               @Html.EditorFor(model => model.DatosGenerales.OcupacionResponsable) 
                            </div>                                                      
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <p class="textCreateJugador">¿En qué otro lugar juega o ha jugado?</p>
                            </div>
                            <div class="col-xs-9">
                                 @Html.EditorFor(model => model.DatosGenerales.JuegaOtroEquipo) 
                            </div>                                                       
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <p class="textCreateJugador">¿Quién lo trajo al club?</p>
                            </div>
                            <div class="col-xs-9">
                                @Html.EditorFor(model => model.DatosGenerales.QuieLoTrajo) 
                            </div>                                                       
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <p class="textCreateJugador">¿El jugador tuvo lesiones?</p>
                            </div>
                            <div class="col-xs-9">
                                 @Html.EditorFor(model => model.DatosGenerales.Lesiones) 
                            </div>                                                                              
                        </div>
                     </div>
                </div>
                <input class="btn btn-primary pull-right" type="submit" value="Guardar" />
    </fieldset>
}
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">

        window.imagenVacia = '';

        window.mostrarVistaPrevia = function mostrarVistaPrevia() {

            var Archivos, Lector;

            //Para navegadores antiguos
            if (typeof FileReader !== "function") {
                jQuery('#infoNombre').text('[Vista previa no disponible]');
                jQuery('#infoTamaño').text('(su navegador no soporta vista previa!)');
                return;
            }

            Archivos = jQuery('#file')[0].files;
            if (Archivos.length > 0) {

                Lector = new FileReader();
                Lector.onloadend = function (e) {
                    var origen, tipo;

                    //Envia la imagen a la pantalla
                    origen = e.target; //objeto FileReader
                    //Prepara la información sobre la imagen
                    tipo = window.obtenerTipoMIME(origen.result.substring(0, 30));

                    jQuery('#infoNombre').text(Archivos[0].name);
                    jQuery('#infoTamaño').text('Tamaño: ' + e.total + ' bytes');
                    //Si el tipo de archivo es válido lo muestra, 
                    //sino muestra un mensaje 
                    if (tipo !== 'image/jpeg' && tipo !== 'image/png' && tipo !== 'image/gif') {
                        jQuery('#vistaPrevia').attr('src', window.imagenVacia);
                        alert('El formato de imagen no es válido: debe seleccionar una imagen JPG, PNG o GIF.');
                    } else {
                        jQuery('#vistaPrevia').attr('src', origen.result);
                        window.obtenerMedidas();
                    }

                };
                Lector.onerror = function (e) {
                    console.log(e)
                }
                Lector.readAsDataURL(Archivos[0]);

            } else {
                var objeto = jQuery('#file');
                objeto.replaceWith(objeto.val('').clone());
                jQuery('#vistaPrevia').attr('src', window.imagenVacia);
                jQuery('#infoNombre').text('[Seleccione una imagen]');
                jQuery('#infoTamaño').text('');
            };


        };

        //Lee el tipo MIME de la cabecera de la imagen
        window.obtenerTipoMIME = function obtenerTipoMIME(cabecera) {
            return cabecera.replace(/data:([^;]+).*/, '\$1');
        }

        //Obtiene las medidas de la imagen y las agrega a la 
        //etiqueta infoTamaño
        window.obtenerMedidas = function obtenerMedidas() {
            jQuery('<img/>').bind('load', function (e) {

                var tamaño = jQuery('#infoTamaño').text() + '; Medidas: ' + this.width + 'x' + this.height;

                jQuery('#infoTamaño').text(tamaño);

            }).attr('src', jQuery('#vistaPrevia').attr('src'));
        }

        jQuery(document).ready(function () {

            //Cargamos la imagen "vacía" que actuará como Placeholder
            jQuery('#vistaPrevia').attr('src', window.imagenVacia);

            //El input del archivo lo vigilamos con un "delegado"
            jQuery('#botonera').on('change', '#file', function (e) {
                window.mostrarVistaPrevia();
            });

            //El botón Cancelar lo vigilamos normalmente
            jQuery('#cancelar').on('click', function (e) {
                var objeto = jQuery('#file');
                objeto.replaceWith(objeto.val('').clone());

                jQuery('#vistaPrevia').attr('src', window.imagenVacia);
                jQuery('#infoNombre').text('[Seleccione una imagen]');
                jQuery('#infoTamaño').text('');
            });
        });

    </script>



}

